import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

//图表2
const options2 = {
    chart: {
        type: 'spline',
        width: 400,
        height: 400,
        // color:"#fff"
    },
    title: {
        text: '风速变化趋势图',
        style: { 'color': 'rgba(0, 0, 0, 0)' },
        floating: true
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%m-%d'
        },
        gridLineColor: 'rgba(255,255,255,0.2)',
        gridLineDashStyle: 'solid',
        gridLineWidth: 1,
        // labels: {
        // 	overflow: 'justify'
        // },
        tickPixelInterval: 80,
    },
    yAxis: {
        title: {
            text: ''
        },
        gridLineColor: 'rgba(255,255,255,0.2)',
        gridLineDashStyle: 'solid',
        gridLineWidth: 1,
        min: 0,
        minorGridLineWidth: 0,
        // alternateGridColor: 'red',
        ceiling: 1000,
        floor: 0,
    },
    tooltip: {
        valueSuffix: ' m/s'
    },
    plotOptions: {
        spline: {
            dashStyle: 'solid',
            // 线条宽度
            lineWidth: 3,
            // 线条颜色
            color: {
                linearGradient: { x1: 0, x2: 1 },
                stops: [
                    [0, '#a44eff'],
                    [1, '#0cb0d3']
                ]
            },
            // 状态
            states: {
                // 鼠标滑过的线条宽度
                hover: {
                    lineWidth: 5
                }
            },
            // 小圆点
            marker: {
                enabled: false
            },
        },
        series: {
            pointStart: Date.UTC(2010, 10, 1), // 开始值
            pointInterval: 24 * 3600 * 1000 // 间隔一天
        }
    },
    series: [{
        name: '',
        data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
            7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
            8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
            7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
            3.0, 3.0]
    }],

    // 关闭打印按钮
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    credits: {
        //去除版权信息
        enabled: false
    },

}




const Charts2 = () => {
    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={options2}
            />
        </div>

    )
}

export default Charts2;
